<div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-6">
        <ngb-tabset (tabChange)="beforeChange($event)">
            <div *ngFor="let articlesArea of articlesAreas">
                <ngb-tab title="{{articlesArea.title}}" id="{{articlesArea.id}}">
                    <template ngbTabContent>
                        <div class="list-group article" *ngFor="let article of articles">
                            <a [routerLink]="['/articleDetail',article.id]" class="list-group-item-action">
                                <h5>
                                    <span class="tag tag-info float-xs-left">
                                        <p class="h4"><b>&nbsp;&nbsp;{{article.commentNum}}</b></p>
                                        <p class="h6"><b>&nbsp;评论</b></p>
                                    </span>
                                </h5>
                                <h5 class="list-group-item-heading text-primary">
                                    &nbsp;{{article.title}}
                                </h5>
                                <p class="list-group-item-text">
                                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag tag-success">{{article.uploader}}</span>
                                    /
                                    <span class="tag tag-default">{{article.addTime | date}} / {{article.commentNum}}条评论，{{article.onlookerNum}}人围观</span>
                                </p>
                                <small class="text-muted">&nbsp;{{article.synopsis}}</small>
                            </a>
                            <hr>
                        </div>
                    </template>
                </ngb-tab>
            </div>
        </ngb-tabset>
        <ngb-pagination (pageChange)="pageChange($event)" [collectionSize]="300" [(page)]="page" [boundaryLinks]="true" [pageSize]="12" [maxSize]="7" [rotate]="true"></ngb-pagination>
    </div>
    <div class="col-sm-1"></div>
    <div class="col-sm-3" id="recommended">
        <div class="row">
            <b>本区推荐</b>
            <hr>
            <div *ngFor="let recommended of recommendeds">
                <div class="recommended_item h6" placement="bottom"
                     ngbTooltip="{{recommended.title}}">
                    <a href="#"><small class="h6">{{recommended.title}}</small></a>
                    <hr>
                </div>
            </div>
        </div>
        <div class="row">
            <b>今日最热</b>
            <hr>
            <div *ngFor="let hottest of hottests">
                <div class="recommended_item" placement="bottom"
                     ngbTooltip="{{hottest.title}}">
                    <a href="#"><small class="h6">{{hottest.title}}</small></a>
                    <hr>
                </div>
            </div>
        </div>
        <div class="row">
            <b>最新回复</b>
            <hr>
            <div *ngFor="let latest of latests">
                <div class="recommended_item" placement="bottom"
                     ngbTooltip="{{latest.title}}">
                    <a href="#"><small class="h6">{{latest.title}}</small></a>
                    <hr>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-1"></div>

</div>
